<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Forward Optitrans</title>
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<link rel="shortcut icon" href="#" />
<link rel="bookmark icon" href="#" />
<link href="/static/css/main.css" rel="stylesheet" type="text/css">
<meta name="#" content="yes" />
<meta name="#" content="grey" />
<meta name="viewport" content="#" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/static/js/jquery.nivo.slider.js"></script>
<script src="/static/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="/static/js/twitter.js"></script>
<script src="/static/js/custom.js"></script>
<script>
	//// Start Simple Sliders ////
	$(function() {
		setInterval("rotateDiv()", 10000);
	});

	function rotateDiv() {
		var currentDiv = $("#simpleslider div.current");
		var nextDiv = currentDiv.next();
		if (nextDiv.length == 0)
			nextDiv = $("#simpleslider div:first");

		currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
		nextDiv.fadeIn('3000').addClass('current', function() {
			currentDiv.fadeOut('2000', function() {
				currentDiv.removeClass('previous');
			});
		});

	}
	//// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>
<script>
	jQuery(function($) {

		// simple jQuery validation script
		$('#login').submit(
				function() {

					var valid = true;
					var errormsg = 'This field is required!';
					var errorcn = 'error';

					$('.' + errorcn, this).remove();

					$('.required', this).each(
							function() {
								var parent = $(this).parent();
								if ($(this).val() == '') {
									var msg = $(this).attr('title');
									msg = (msg != '') ? msg : errormsg;
									$(
											'<span class="'+ errorcn +'">'
													+ msg + '</span>')
											.appendTo(parent).fadeIn('fast')
											.click(function() {
												$(this).remove();
											})
									valid = false;
								}
								;
							});

					return valid;
				});

	})
</script>
<style>

/* HTML elements  */
p,blockquote,ul,ol,dl,form,table,pre {
	line-height: inherit;
	margin: 0 0 1.5em 0;
}

ul,ol,dl {
	padding: 0;
}

ul ul,ul ol,ol ol,ol ul,dd {
	margin: 0;
}

blockquote,dd {
	padding: 0 0 0 2em;
}

pre,code,samp,kbd,var {
	font: 100% mono-space, monospace;
}

pre {
	overflow: auto;
}

abbr,acronym {
	text-transform: uppercase;
	border-bottom: 1px dotted #000;
	letter-spacing: 1px;
}

abbr[title],acronym[title] {
	cursor: help;
}

small {
	font-size: .9em;
}

sup,sub {
	font-size: .8em;
}

em,cite,q {
	font-style: italic;
}

img {
	border: none;
}

hr {
	display: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,caption {
	text-align: left;
}

form div {
	margin: .5em 0;
	clear: both;
}

label {
	display: block;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

legend {
	font-weight: bold;
}

input[type="radio"],input[type="checkbox"],.radio,.checkbox {
	margin: 0 .25em 0 0;
}

/* //  HTML elements */

/* login form */
#login {
	margin: 5em auto;
	background: #fff;
	border: 8px solid #eee;
	width: 400px;
	min-height: 385px;
	margin-bottom: 60px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 10px #4e707c;
	-webkit-box-shadow: 0 0 10px #4e707c;
	box-shadow: 0 0 10px #4e707c;
	text-align: left;
	position: relative;
}

#login a,#login a:visited {
	color: #0283b2;
}

#login a:hover {
	color: #111;
}

#login h1 {
	background-image: url(images/header-bg.png);
	color: #000;
	text-shadow: #007dab 0 1px 0;
	font-size: 30px;
	padding: 25px 23px;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #007dab;
}

#login .register {
	position: absolute;
	float: left;
	margin: 0;
	line-height: 30px;
	top: -40px;
	right: 0;
	font-size: 11px;
}

#login p {
	margin: .5em 25px;
}

#login div {
	margin: 18px 25px;
	background: #eee;
	padding: 4px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-align: right;
	position: relative;
}

#login label {
	float: left;
	line-height: 30px;
	padding-left: 1px;
}

#login .field {
	border: 1px solid #ccc;
	width: 325.5px;
	font-size: 20px;
	line-height: 1em;
	padding: 8px;
	-moz-box-shadow: inset 0 0 5px #ccc;
	-webkit-box-shadow: inset 0 0 5px #ccc;
	box-shadow: inset 0 0 5px #ccc;
	float: center;
}

#login div.submit {
	background: none;
	margin: -5px 0px 0px 233px;
	text-align: left;
}

#login div.submit label {
	float: none;
	display: inline;
	font-size: 11px;
}
/*#login button{
    border:0;
    padding:0 30px;
    height:30px;
    line-height:30px;
    text-align:center;
    font-size:12px;
    color:#fff;
    text-shadow:#007dab 0 1px 0;
    background:#da620b;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    cursor:pointer;
    }*/
#login button:link.blackbutton,a:visited.blackbutton {
	border: 1px solid #000;
	background: #000;
	background: -moz-linear-gradient(top, #3f3f3f, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#3f3f3f),
		to(#000));
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#3f3f3f',
		EndColorStr='#000', GradientType=0);
	color: #fff;
	text-shadow: none !important;
}

#login button:hover.blackbutton {
	border: 1px solid #000;
	background: #7c7c7c;
	background: -moz-linear-gradient(top, #7c7c7c, #000);
	background: -webkit-gradient(linear, left top, left bottom, from(#7c7c7c),
		to(#000));
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#7c7c7c',
		EndColorStr='#000', GradientType=0);
	color: #fff;
	text-shadow: none !important;
}

#login .forgot {
	text-align: right;
	font-size: 11px;
}

#login .back {
	padding: 1em 0;
	border-top: 1px solid #eee;
	text-align: right;
	font-size: 11px;
}

#login .error {
	float: left;
	position: absolute;
	left: 95%;
	top: -5px;
	background: #890000;
	padding: 5px 10px;
	font-size: 11px;
	color: #fff;
	text-shadow: #500 0 1px 0;
	text-align: left;
	white-space: nowrap;
	border: 1px solid #500;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 0 5px #700;
	-webkit-box-shadow: 0 0 5px #700;
	box-shadow: 0 0 5px #700;
}

/* //  login form */
</style>
</head>

<body>

<div id="header">
    	<!-- Start navigation area -->
        <div id="navigation">

        	<div id="navigation_wrap">
                <!-- Start Date et Heure area -->
                <div id="time"><a href="accueil.html"><img src="/static/images/logo.png" width="200" height="80" ></a></div>
                <!-- End contact info area -->
                <!-- Start navigation -->
                
                <!-- End navigation -->
			</div>
        </div>
        <!-- End navigation area -->
        <div class="clear"></div>
        <!-- Start Social & Logo area -->
</div>
	<div id="main">
		<!-- Start Main Body Wrap -->
		<div id="main-wrap">
			<!-- End Left Section -->
			<div class="leftsection1">
				<div class="presentation">
					<h2>OPTITRANS</h2>
					<p>
						<h5>Bienvenue sur OPTITRANS, la solution efficace et efficiente de géo-localisation sur le marché</i>
					</h5>
					</p>
					<div class="cadrePresentation">
						<div class="cadreImage">
							<img src="/static/images/enveloppe(1).jpg" width="125"
								height="75">
						</div>
						<div class="cadreTexte">
							<h5 ><bold>EFFICACITE</bold></h5>
							<h5>Suivre en temps réel l’état de la flotte de vos véhicules : statut, nom du conducteur, vitesse, lieu etc.</h5>
							
						</div>
					</div>
					<div class="cadreEspace"></div>
					<div class="cadrePresentation">
						<div class="cadreImage">
							<img src="/static/images/enveloppe(1).jpg" width="125"
								height="75">
						</div>
						<div class="cadreTexte">
							<h5>SECURITE </h5>
							<h5>Notre charte de confidentialité assure une sécurité maximale à vos données qui ne sont accessibles qu’aux personnes autorisées</h5>
							
						</div>
					</div>
					<div class="cadreEspace"></div>
					<div class="cadrePresentation">
						<div class="cadreImage">
							<img src="/static/images/enveloppe(1).jpg" width="125"
								height="75">
						</div>
						<div class="cadreTexte">
							<h5>SIMPLICITE</h5>
							<h5>Interface utilisateur ergonomique, optimisée, simple, et facile à utiliser sur le web et sur les mobile & tablette</h5>
							
						</div>
					</div>
				</div>
			</div>
			<!-- Fin Leftscection -->
			<!-- Start Right Section -->
			<div class="rightsection1">

				<form id="login" method="post"
					action="{% url 'django.contrib.auth.views.login' %}">
					{% csrf_token %}
					<h1>
						Page de Connexion <strong></strong>
					</h1>
					<div>
						<label for="login_username">Non d'utilisateur</label></br> <input
							type="text" name="username" id="username" class="field required"
							title="Please provide your username" />
					</div>
					<div>
						<label for="login_password">Mot de Passe</label></br> <input
							type="password" name="password" id="password"
							class="field required" title="Password is required" />
					</div>
					<div class="submit">
						<button type="submit" value="test"
							class="blackbutton mediumrectange">Se connecter</button>
						<input type="hidden" name="next" value="{{ next }}" />

					</div>
				</form>
			</div>
			<!-- End Right Section -->
		</div>
		<!-- End MainWrap -->
	</div>
	<!--<div id="footer">{% block footer %} {% include
		"commons/cadre_footer.html" %} {% endblock %}</div> -->
		<div id="footer">{% include "commons/cadre_footer.html" %}</div>
	<!-- End Footer -->
	<!-- Start Scroll To Top Div -->
	<div id="scrolltab"></div>
	<!-- End Scroll To Top Div -->
</body>
</html>